<template>
    <div>
        <!-- 默认插槽 -->
        <div class="header">
            <slot />
        </div>
        <!-- 具名插槽 -->
        <div class="footer">
            <slot name="footer">
            </slot>
        </div>
        <!-- 作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。 -->
        <slot name="header" text="我是子组件小猪课堂" :count="1"></slot>
    </div>
</template>

<script setup>
import { reactive, ref, useSlots } from 'vue'
const data = reactive(['1', '2', '3'])
const slots = useSlots()
console.log(slots);
</script>